<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, 
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>携程旅行-酒店预订,机票预订查询,旅游度假,商旅管理-携程无线官网</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!-- 搜索框 -->
    <div class="searchBox">
        <span class="search">
            搜索:目的地/酒店/景点/航班号
        </span>
        <div class="login">
            <p class="people"></p>
            <p class="mine">我的</p>
        </div>
    </div>
    <!-- 搜索框结束 -->
    <!-- 顶部背景图 -->
    <div class="focus">
        <a href="#">
            <img src="images/banner.jpg" alt="">
        </a>
    </div>
    <!-- 顶部背景图结束 -->
    <!-- 本地导航部分 -->
    <div class="local-nav">
        <div class="navList">
            <a href="#" class="navItem">
                <span class="navIcon"></span>
                <span>攻略▪景点</span>
            </a>
            <a href="#" class="navItem">
                <span class="navIcon"></span>
                <span>门票▪玩乐</span>
            </a>
            <a href="#" class="navItem">
                <span class="navIcon"></span>
                <span>美食林</span>
            </a>
            <a href="#" class="navItem">
                <span class="navIcon"></span>
                <span>周边游</span>
            </a>
            <a href="#" class="navItem">
                <span class="navIcon"></span>
                <span>一日游</span>
            </a>
        </div>
    </div>
    <!-- 导航部分结束 -->
    <!-- 网格导航区域 -->
    <div class="grid-nav">
        <div class="gridList">
            <div class="common">
                <a>
                    <span>酒店</span>
                </a>
                <a>
                    <span>民宿▪客栈</span>
                </a>
                <a>
                    <span>特价▪爆款</span>
                </a>
            </div>
            <div class="common">
                <a>
                    <span>机票</span>
                </a>
                <a>
                    <span>火车票</span>
                </a>
                <a>
                    <span>汽船▪车票</span>
                </a>
                <a>
                    <span>专车▪租车</span>
                </a>
            </div>
            <div class="common">
                <a>
                    <span>旅游</span>
                </a>
                <a>
                    <span>高铁游</span>
                </a>
                <a>
                    <span>邮轮游</span>
                </a>
                <a>
                    <span>定制游</span>
                </a>
            </div>
        </div>
    </div>
    <!-- 网格导航区域结束 -->
    <!-- sub-nav区域 -->
    <div class="sub-nav">
        <ul class="subList">
            <li>
                <a href="#">
                    <span></span>
                    <span>自由行</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span></span>
                    <span>WiFi电话卡</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span></span>
                    <span>保险签证</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span></span>
                    <span>换钞·购物</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span></span>
                    <span>向导·包车</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span></span>
                    <span>特价机票</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span></span>
                    <span>礼品卡</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span></span>
                    <span>申卡·借钱</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span></span>
                    <span>旅拍</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span></span>
                    <span>更多</span>
                </a>
            </li>
        </ul>
    </div>
    <!-- sub-nav区域结束 -->
    <!-- 底部区域 -->
    <footer>
        <div class="f-top">
            <a href="#">
                <span></span>
                <span>电话预定</span>
            </a>
            <a href="#">
                <span></span>
                <span>下载客户端</span>
            </a>
            <a href="#">
                <span></span>
                <span>我的</span>
            </a>
        </div>
        <p class="f-middle">
            <a href="#">网站地图</a> |
            <a href="#">Language</a> |
            <a href="#">电脑版</a>
        </p>
        <p class="f-bottom">
            &#169;携程旅行 ｜ 沪ICP备08023580号
        </p>
    </footer>
</body>

</html>